<template>
  <div id="permission">
    <div>
      <div>
        <el-input
          v-model="itemName"
          placeholder="请输入内容"
          style="margin-left: 10px"
        ></el-input>
        <el-button
          size="small"
          type="primary"
          icon="el-icon-search"
          @click="toSearch"
          style="float: right"
          >搜索</el-button
        >
      </div>
      <div>
        <el-button
          icon="el-icon-circle-plus"
          round
          size="small"
          @click="toAdd"
          style="float: right"
          >新增</el-button
        >
      </div>
    </div>
    <div>
      <el-table :data="perData" style="width: 100%">
        <el-table-column prop="id" label="序号" width="80" type="index">
        </el-table-column>
        <el-table-column prop="name" label="名称" width="80" align="center">
        </el-table-column>
        <el-table-column prop="description" label="描述"> </el-table-column>
        <el-table-column prop="route" label="路由"> </el-table-column>
        <el-table-column prop="routeName" label="路由名" align="center">
        </el-table-column>
        <el-table-column prop="type" label="类型" align="center">
        </el-table-column>
        <el-table-column prop="icon" label="标识" align="center">
        </el-table-column>
        <el-table-column prop="hidden" label="隐藏" align="center">
        </el-table-column>
        <el-table-column prop="num" label="数量" align="center">
        </el-table-column>
        <el-table-column prop="parentId" label="父节点" align="center">
        </el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template slot-scope="scope">
            <!-- <el-button size="mini" @click="handleEdit(scope.row)"
                >编辑</el-button
              > -->
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-dialog
        :title="title"
        :visible.sync="visible"
        :before-close="beforeClose"
      >
        <el-form :model="form" :rules="rules" ref="ruleForm">
          <el-form-item label="序号" :label-width="formLabelWidth" prop="id">
            <el-input v-model="form.id" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="名称" :label-width="formLabelWidth" prop="name">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item
            label="描述"
            :label-width="formLabelWidth"
            prop="description"
          >
            <el-input v-model="form.description" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="路由" :label-width="formLabelWidth" prop="route">
            <el-input v-model="form.route" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item
            label="路由名"
            :label-width="formLabelWidth"
            prop="routeName"
          >
            <el-input v-model="form.routeName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="类型" :label-width="formLabelWidth" prop="type">
            <el-input v-model="form.type" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="标识" :label-width="formLabelWidth" prop="icon">
            <el-input v-model="form.icon" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item
            label="是否隐藏"
            :label-width="formLabelWidth"
            prop="hidden"
          >
            <el-input v-model="form.hidden" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="数量" :label-width="formLabelWidth" prop="num">
            <el-input v-model="form.num" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item
            label="父节点"
            :label-width="formLabelWidth"
            prop="parentId"
          >
            <el-input v-model="form.parentId" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="toCancel">取 消</el-button>
          <el-button type="primary" @click="toSave('ruleForm')"
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import axios from "../utils/request";
export default {
  data() {
    return {
      visible: false,
      formLabelWidth: "100px",
      form: {},
      title: "录入权限设置信息",
      perData: [],
      itemName: "",
      rules: {
        id: [{ required: true, message: "请输入权限序号", trigger: "blur" }],
        name: [{ required: true, message: "请输入项目名称", trigger: "blur" }],
        description: [
          { required: true, message: "请输入具体描述", trigger: "blur" },
        ],
        route: [{ required: true, message: "请输入路由", trigger: "blur" }],
        routeName: [
          { required: true, message: "请输入路由名字", trigger: "blur" },
        ],
        type: [{ required: true, message: "请输入类型", trigger: "blur" }],
        icon: [{ required: true, message: "请输入标识", trigger: "blur" }],
        hidden: [
          { required: true, message: "请输入是否隐藏", trigger: "blur" },
        ],
        num: [{ required: true, message: "请输入数量", trigger: "blur" }],
        parentId: [
          { required: true, message: "请输入父节点", trigger: "blur" },
        ],
      },
    };
  },
  computed: {},
  methods: {
    async findAll() {
      let res = await axios.get("privilege/findAll");
      this.perData = res.data;
    },
    toSearch() {
      axios
        .get("/privilege/findByParentId", {
          params: {
            id: this.itemName,
          },
        })
        //页面渲染
        .then((res) => {
          this.perData = res.data;
        });
      console.log(parentId, "===========");
    },
    toCancel() {
      this.$refs["ruleForm"].resetFields();
      this.visible = false;
    },
    beforeClose(done) {
      this.$refs["ruleForm"].resetFields();
      done();
    },
    // 点击新增按钮
    toAdd() {
      this.form = {};
      this.visible = true;
      this.title = "录入权限设置信息";
    },
    // 点击确定按钮
    toSave(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 校验通过
          // console.log(this.form, "=======");
          axios.post("/privilege/saveOrUpdate", this.form).then((res) => {
            if (res.status == 200) {
              // 保存成功，关闭模态框，刷新表格数据
              // alert("保存成功");
              this.$notify({
                title: "成功",
                message: "这是一条成功的提示消息",
                type: "success",
              });
              this.toCancel();
              this.findAll();
            } else {
              // alert("保存失败");
              this.$notify.error({
                title: "错误",
                message: "这是一条错误的提示消息",
              });
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    //删除
    handleDelete(id) {
      alert: id,
        // id就是要删除的分类的id
        this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(async () => {
            let res = await axios.get("/privilege/deleteById", {
              params: { id },
            });
            this.$notify({
              title: res.status == 200 ? "成功" : "失败",
              message: "res.statusText",
              type: res.status == 200 ? "success" : "error",
            });
            this.findAll();
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已删除",
            });
          });
    },
  },

  created() {
    this.findAll();
  },
};
</script>
<style  scoped>
.formDiv {
  float: left;
  width: 300px;
}
.form2Div {
  margin-left: 10px;
  margin-top: 30px;
}
</style>